<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 学院基本信管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>学院编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="学院名称" prop="collegeName">
            <el-input v-model="form.collegeName"></el-input>
          </el-form-item>
          <el-form-item label="学院标识码" prop="collegeCode">
            <el-input v-model="form.collegeCode" maxlength="2" show-word-limit type="number"></el-input>
          </el-form-item>
          <el-form-item label="学院简称" prop="shortName">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
          <el-form-item label="学院介绍" prop="intro">
            <el-input v-model="form.intro"></el-input>
          </el-form-item>
          <el-form-item label="院长" prop="president">
            <el-input v-model="form.president"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import request from "../../utils/request";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "AddCollege",
  setup() {
    const root = "/college/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const rules = {
      collegeName: [
        {required: true, message: "请输入学院名", trigger: "blur"},
      ],
      collegeCode: [
        {required: true, message: "请输入学院code码", trigger: "blur"},
      ],

    };
    const formRef = ref(null);
    var form = reactive({
      sid: "",
      collegeName: "",
      shortName: "",
      intro: "",
      president: "",
      collegeCode: "",
    });
    if (route.query.id) {
      request.get(root + route.query.id).then((res) => {
        form.sid = route.query.id;
        form.collegeName = res.data.collegeName;
        form.shortName = res.data.shortName;
        form.intro = res.data.intro;
        form.president = res.data.president;
        form.collegeCode = res.data.collegeCode;
      });
    }
    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {

          var method = form.sid === "" ? "POST" : "PUT";
          request({
            url: "/college",
            method: method,
            data: form,
          }).then((res) => {
           if (res.code == 18) {
             ElMessage.error(res.msg);
              } else {
            ElMessage.success("提交成功！");
            // 关闭当前页面的标签页;
            store.commit("closeCurrentTag", {
              $router: router,
              $route: route,
            });
              }
            router.push("/admin/college");
          });
        } else {
          return false;
        }
      });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };

    return {
      rules,
      formRef,
      form,
      onSubmit,
      onReset,
    };
  },
};
</script>